<template>
  <div class="function_module">
    <div class="module_title">
      <span class="module_title_name">{{ allocationObj.title }}</span>
      <div class="module_title_right">
        <span @click="lookAll" v-if="allocationObj.jumpUrl">查看全部</span>
      </div>
    </div>
    <div class="module_data_list">
      <template v-if="isHome">
        <div style="margin-bottom: 5px" class="tr_hover_th">
          <div
            class="td th"
            :style="{ textAlign: 'center', width: item.width + '%' }"
            v-for="(item, index) in allocationObj.meterHeader"
            :key="index + '-'"
          >
            {{ item.nameValue }}
          </div>
        </div>
        <div
          class="tr_hover"
          v-for="(item, index) in listData"
          :key="index"
          @click="moduleListFn(item)"
        >
          <div
            class="td"
            :style="{ textAlign: 'center', width: o.width + '%' }"
            v-for="(o, i) in allocationObj.meterHeader"
            :key="i"
          >
            <template v-if="o.enumerationList">
              <!-- <template v-for="(n, ind) in o.enumerationList"> -->
              <!-- <span :key="ind" :style="{ color: '#666666' }">{{ -->
              <span
                :style="{
                  color: o.enumerationList.find((it) => {
                    return it.enumerationValue == item[o.keyValue];
                  })
                    ? o.enumerationList.find((it) => {
                        return it.enumerationValue == item[o.keyValue];
                      }).color
                    : '',
                }"
              >
                <span v-if="o.nameValue == '序号'">{{ index + 1 }}</span>
                <span v-if="o.nameValue == '排名'" class="ranking_img_span">
                  <img
                    class="ranking_img"
                    v-if="index == '0'"
                    src="@/assets/images/ranking1.png"
                    alt=""
                  />
                  <img
                    class="ranking_img"
                    v-else-if="index == '1'"
                    src="@/assets/images/ranking2.png"
                    alt=""
                  />
                  <img
                    class="ranking_img"
                    v-else-if="index == '2'"
                    src="@/assets/images/ranking3.png"
                    alt=""
                  />
                  <span v-else>{{ index + 1 }}</span>
                </span>
                <span v-else>{{ item[o.keyValue] }}</span>
              </span>
            </template>
            <!-- </template> -->
            <span v-else>
              <span v-if="o.nameValue == '序号'">{{ index + 1 }}</span>
              <span v-if="o.nameValue == '排名'" class="ranking_img_span">
                <img
                  class="ranking_img"
                  v-if="index == '0'"
                  src="@/assets/images/ranking1.png"
                  alt=""
                />
                <img
                  class="ranking_img"
                  v-else-if="index == '1'"
                  src="@/assets/images/ranking2.png"
                  alt=""
                />
                <img
                  class="ranking_img"
                  v-else-if="index == '2'"
                  src="@/assets/images/ranking3.png"
                  alt=""
                />
                <span v-else>{{ index + 1 }}</span>
              </span>
              <span v-else>{{ item[o.keyValue] }}</span>
            </span>
          </div>
        </div>
      </template>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="moduleVisible"
      width="30%"
      modal-append-to-body
      append-to-body
      :before-close="handleClose"
    >
      <div>
        <el-radio-group v-model="currentModule" size="small">
          <el-radio
            :label="item.selectValue"
            border
            v-for="item in allocationObj.moduleList"
            :key="item.selectValue"
            >{{
              item.selectValue == "workTasks"
                ? "工作任务"
                : item.selectValue == "preSalesSupportList"
                ? "售前支持列表"
                : item.selectValue == "inspectionTasks"
                ? "巡检任务"
                : item.selectValue == "reportingOpportunities"
                ? "报备商机"
                : item.selectValue == "projectAcceptance"
                ? "项目验收"
                : ""
            }}</el-radio
          >
          <!-- <el-radio label="2" border disabled>备选项2</el-radio> -->
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <WorkTasksDetail
      v-if="detailVisible"
      ref="WorkTasksDetail"
      :spect="false"
      @refresh="detailVisible = false"
    /> -->
    <!-- <BeforeSaleSupportDetail v-if="WorkTasksDetailVisible" ref="BeforeSaleSupportDetail" @refresh="WorkTasksDetailVisible = false" /> -->
  </div>
</template>

<script>
import request from "@/utils/request";
// import WorkTasksDetail from "@/views/crm/crmworkitem/Detail.vue";
// import BeforeSaleSupportDetail from "@/views/before-sale/before-sale-support-list/Detail.vue";
export default {
  props: {
    allocationObj: { default: "" },
    isHome: { default: true },
  },
  // components: { WorkTasksDetail  },
  data() {
    return {
      listData: [],
      moduleVisible: false,
      currentModule: "workTasks",
      detailVisible: false,
      WorkTasksDetailVisible: false,
    };
  },
  computed: {
    baseApi() {
      // return "https://gl.bringspring.com/jsbos-manager";
      return window.config.VUE_APP_BASE_API;
    },
  },
  created() {
    this.allocationObj.meterHeader &&
      this.allocationObj.meterHeader.forEach((item) => {
        this.allocationObj.customFieldList.forEach((el) => {
          if (item.keyValue == el.customFieldKey) {
            item.enumerationList = el.enumerationList;
          }
        });
      });
    console.log("function_module", this.allocationObj);
    this.getData();
  },
  methods: {
    moduleListFn(item) {
      if (!this.allocationObj.jumpUrl) {
        return;
      }
      console.log(item, "00000");
      console.log(this.allocationObj, "88888");
      let url = this.allocationObj.jumpUrl
        ? this.allocationObj.jumpUrl.split("?")[0]
        : "";
      let path = this.$router.resolve({
        path: url,
        query: {
          applicationId: this.allocationObj.jumpUrl
            ? this.allocationObj.jumpUrl.split("=")[1]
            : "",
          id: item.id,
        },
      });
      window.open(this.baseApi + "/" + path.href, "_blank");
      // if (this.allocationObj.apiName == "workTasks") {
      //   this.detailVisible = true;
      //   this.$nextTick(() => {
      //     this.$refs.WorkTasksDetail.init(item.id);
      //   });
      // } else if (this.allocationObj.apiName == "preSalesSupportList") {
      //   localStorage.setItem("homeJumpId", item.id);
      //   this.$router.push({
      //     path: "/before-sale/before-sale-support-list/index.vue",
      //   });
      // } else if (this.allocationObj.apiName == "inspectionTasks") {
      //   localStorage.setItem("homeJumpId", item.id);
      //   this.$router.push({
      //     path: "/after-sales/inspect/task",
      //   });
      // } else if (this.allocationObj.apiName == "reportingOpportunities") {
      //   localStorage.setItem("homeJumpId", item.id);
      //   this.$router.push({
      //     path: "/reporting/list",
      //   });
      // } else if (this.allocationObj.apiName == "projectAcceptance") {
      //   localStorage.setItem("homeJumpId", item.id);
      //   this.$router.push({
      //     path: "/contract/project",
      //   });
      // }
    },
    async lookAll() {
      console.log(this.allocationObj, "88888");
      let url = this.allocationObj.jumpUrl.split("?")[0];
      // this.$store.dispatch("tagsView/closeAll");
      // const res = await this.$store.dispatch(
      //   "user/getInfo",
      //   this.allocationObj.jumpUrl.split("=")[1]
      // );
      // console.log(res, "-------");
      // const accessRoutes = await this.$store.dispatch(
      //   "permission/generateRoutes",
      //   res
      // );
      // accessRoutes[0].redirect = url;
      // this.$router.addRoutes(accessRoutes);
      // this.drawer = false;
      let path = this.$router.resolve({
        path: url,
        query: { applicationId: this.allocationObj.jumpUrl.split("=")[1] },
      });
      window.open(this.baseApi + "/" + path.href, "_blank");
      // window.open(window.location.origin + "/" + path.href, "_blank");
      // if (this.allocationObj.apiName == "workTasks") {
      //   this.$router.push({
      //     path: "/crm/crmworkitem",
      //   });
      // } else if (this.allocationObj.apiName == "preSalesSupportList") {
      //   this.$router.push({
      //     path: "/before-sale/before-sale-support-list/index.vue",
      //   });
      // } else if (this.allocationObj.apiName == "inspectionTasks") {
      //   this.$router.push({
      //     path: "/after-sales/inspect/task",
      //   });
      // } else if (this.allocationObj.apiName == "reportingOpportunities") {
      //   this.$router.push({
      //     path: "/reporting/list",
      //   });
      // } else if (this.allocationObj.apiName == "projectAcceptance") {
      //   this.$router.push({
      //     path: "/contract/project",
      //   });
      // }
    },
    getData() {
      // if (this.allocationObj.apiName == "workTasks") {
      //   request({
      //     url: this.allocationObj.apiUrl,
      //     method: "post",
      //     data: {
      //       currentPage: 1,
      //       enabledMark: "todo,inprogress,completed",
      //       menuId: "430754548198416069",
      //       pageSize: 20,
      //       sort: "desc",
      //       switchType: "myTask",
      //     },
      //   }).then((res) => {
      //     console.log(res);
      //     // this.listData = res.data.list
      //     if (res.data.list && res.data.list.length > 4) {
      //       this.listData = res.data.list.slice(0, 4);
      //     } else {
      //       this.listData = res.data.list;
      //     }
      //   });
      // } else if (this.allocationObj.apiName == "preSalesSupportList") {
      //   request({
      //     url: this.allocationObj.apiUrl,
      //     method: "post",
      //     data: {
      //       currentPage: 1,
      //       menuId: "520599409960949253",
      //       pageSize: 20,
      //       sort: "desc",
      //     },
      //   }).then((res) => {
      //     console.log(res);
      //     // this.listData = res.data.list
      //     if (res.data.list && res.data.list.length > 4) {
      //       this.listData = res.data.list.slice(0, 4);
      //     } else {
      //       this.listData = res.data.list;
      //     }
      //   });
      // } else if (this.allocationObj.apiName == "inspectionTasks") {
      //   request({
      //     url: this.allocationObj.apiUrl,
      //     method: "post",
      //     data: {
      //       currentPage: 1,
      //       menuId: "496283345131587333",
      //       pageSize: 20,
      //       sort: "desc",
      //     },
      //   }).then((res) => {
      //     console.log(res);
      //     // this.listData = res.data.list
      //     if (res.data.list && res.data.list.length > 4) {
      //       this.listData = res.data.list.slice(0, 4);
      //     } else {
      //       this.listData = res.data.list;
      //     }
      //   });
      // } else if (this.allocationObj.apiName == "reportingOpportunities") {
      //   request({
      //     url: this.allocationObj.apiUrl,
      //     method: "post",
      //     data: {
      //       currentPage: 1,
      //       menuId: "503903334252416133",
      //       pageSize: 20,
      //       sort: "desc",
      //     },
      //   }).then((res) => {
      //     console.log(res);
      //     // this.listData = res.data.list
      //     if (res.data.list && res.data.list.length > 4) {
      //       this.listData = res.data.list.slice(0, 4);
      //     } else {
      //       this.listData = res.data.list;
      //     }
      //   });
      // } else if (this.allocationObj.apiName == "projectAcceptance") {
      //   request({
      //     url: this.allocationObj.apiUrl,
      //     method: "post",
      //     data: {
      //       currentPage: 1,
      //       menuId: "446214183986446597",
      //       pageSize: 20,
      //       sort: "desc",
      //     },
      //   }).then((res) => {
      //     console.log(res);
      //     // this.listData = res.data.list
      //     if (res.data.list && res.data.list.length > 4) {
      //       this.listData = res.data.list.slice(0, 4);
      //     } else {
      //       this.listData = res.data.list;
      //     }
      //   });
      // } else {

      request({
        url: this.allocationObj.apiUrl,
        method: this.allocationObj.customUrlPostType
          ? this.allocationObj.customUrlPostType
          : "post",
        data: this.allocationObj.params
          ? JSON.parse(this.allocationObj.params)
          : {},
      }).then((res) => {
        console.log(res);
        // this.listData = res.data.list
        if (res.data.list) {
          if (res.data.list.length > 4) {
            this.listData = res.data.list.slice(0, 4);
          } else {
            this.listData = res.data.list;
          }
        } else if (res.data) {
          if (res.data.length > 5) {
            this.listData = res.data.slice(0, 5);
          } else {
            this.listData = res.data;
          }
        }
        console.log(this.listData, "++++++");
      });
      // }
    },
    changeModule() {
      this.moduleVisible = true;
    },
    handleClose() {
      this.moduleVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.function_module {
  height: 100%;
  // min-width: 500px;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  overflow-y: auto;
  .module_title_name {
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    padding: 0 10px;
  }
  .module_title_right {
    float: right;
    font-size: 14px;
    color: #bdbdbd;
    line-height: 24px;
    span {
      cursor: pointer;
    }
    span:hover {
      color: #008dff;
    }
  }
  .module_data_list {
    padding: 20px 10px 10px;

    .td {
      height: 30px;
      display: inline-block;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      top: 4px;
      color: #646464;
    }
    .th {
      color: #000000;
    }
    .tr_hover {
      // margin-top: 13px;
      // border: 1px solid #eeeeee;
      border-radius: 6px;
      line-height: 30px;
      cursor: pointer;
      // padding: 0 5px;
    }
    .tr_hover:nth-child(1) {
      margin-top: 22px;
    }
    .tr_hover:hover {
      // box-shadow: 0px 3px 13px 0px rgba(185, 207, 239, 0.45);
      // border: 1px solid #eeeeee;
    }

    table {
      width: 100%;
      font-size: 14px;
      // border-collapse: collapse;
      font-family: PingFangSC-Regular;
      .th {
        border: 1px solid #ffffff;
        margin-top: 0px;
      }
      tr {
        display: block;
        margin-top: 15px;
        border: 1px solid #eeeeee;
        border-radius: 6px;
        line-height: 30px;
      }
      tr:nth-child(2) {
        margin-top: 0;
      }
      td {
        padding: 0 5px;
      }
      .tr_hover {
        cursor: pointer;
      }
      .tr_hover:hover {
        box-shadow: 0px 3px 13px 0px rgba(185, 207, 239, 0.45);
        border: 1px solid #eeeeee;
      }
    }
  }
  // .tr_hover_th {
  //   th:nth-child(1) {
  //     text-align: left;
  //   }
  // }
}
>>> .el-radio--small {
  width: 125px !important;
  float: left;
  margin: 0 !important;
  margin-top: 10px !important;
  margin-right: 3px !important;
}
.ranking_img_span {
  display: inline-block;
  height: 30px;
  position: relative;
  // top: 8px;
}
.ranking_img {
  // position: absolute;
}
</style>
